import React, { PureComponent } from 'react';
// import { connect } from 'dva';
import {
  Form,
  Button,
  Upload,
  Icon,
  Radio,
  Modal,
} from 'antd';
import styles from './index.less';

function getBase64(file) {
  return new Promise((resolve, reject) => {
    const reader = new FileReader();
    reader.readAsDataURL(file);
    reader.onload = () => resolve(reader.result);
    reader.onerror = error => reject(error);
  });
}

class PicturesWall extends React.Component {
  state = {
    previewVisible: false,
    previewImage: '',
    fileList: [
      // {
      //   uid: '-1',
      //   name: 'xxx.png',
      //   status: 'done',
      //   url: 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png',
      // },
    ],
    value: 0,
  };

  handleCancel = () => this.setState({ previewVisible: false });

  handlePreview = async file => {
    if (!file.url && !file.preview) {
      file.preview = await getBase64(file.originFileObj);
    }

    this.setState({
      previewImage: file.url || file.preview,
      previewVisible: true,
    });
  };

  handleChange = ({ fileList }) => this.setState({ fileList });

  radioChange = e =>{
    this.setState({
      value: e.target.value,
    })
  }

  handleSubmit = (e) => {
    const t = this;
    e.preventDefault();
    const apiurl = 'https://seventh.chinacloudsites.cn/api/services/app/HotelPicture/CreateOrUpdate';
    
    if(this.state.fileList.length>0){
      const pic_url = this.state.fileList[0].response.result.httpUrl;
      const data = {
        "hotelPicture": {
          "pictureType": this.state.value,
          "pictureUrl": pic_url,
        }
      }
      fetch(apiurl,{
        headers:{'Content-Type': 'application/json;charset=UTF-8'},
        method:"POST",
        body:JSON.stringify(data)
    }).then(function (res){
          res.json().then(function(o){
            if(o.success){
              t.setState({
                fileList: [],
                value: 0
              })
            }
            
          })
        }
      )
    } else {
      alert('请上传图片！')
    }
  
  }


  render() {
    const { previewVisible, previewImage, fileList } = this.state;
    const FormItem = Form.Item;
    const uploadButton = (
      <div>
        <Icon type="plus" />
        <div className="ant-upload-text">Upload</div>
      </div>
    );
    return (
      <Form onSubmit={this.handleSubmit}>
        <FormItem 
          label="上传图片"
        >
          <div className="clearfix">
            <Upload
              action="https://seventh.chinacloudsites.cn/api/services/app/Weixin/UploadFile"
              listType="picture-card"
              fileList={fileList}
              onPreview={this.handlePreview}
              onChange={this.handleChange}
            >
              {fileList.length>0 ? null : uploadButton}
            </Upload>
            <Modal visible={previewVisible} footer={null} onCancel={this.handleCancel}>
              <img alt="example" style={{ width: '100%' }} src={previewImage} />
            </Modal>
          </div>
        </FormItem>
        <FormItem>
          <div className={styles.allRadio}>
            <Radio.Group
              onChange={this.radioChange}
              value={this.state.value}
            >
              <Radio value={0}>外观</Radio>
              <Radio value={1}>公共区域</Radio>
              <Radio value={2}>餐厅</Radio>
              <Radio value={3}>休闲</Radio>
              <Radio value={4}>其他</Radio>
            </Radio.Group>
          </div>

        </FormItem>
        <FormItem
          wrapperCol={{ span: 12, offset: 12 }}
        >
          <Button type="primary" htmlType="submit">提交</Button>
        </FormItem>

      </Form>
    );
  }
}
export default PicturesWall